<template>
  <div>

    <i-table :columns="columns1" :data="data1"></i-table>
    <Page :total="pageData.total" :current="pageData.current" :page-size="pageData.size"
          show-elevator show-total @on-change="changePage">
    </Page>






    <!--详情窗口-->
    <Modal
      v-model="detailDig"
      title="博客详情"
      @on-ok="ok"
      @on-cancel="cancel"
      :fullscreen=true>
      <Layout class="layout">
        <Header style="background: #f8f8f9">
          <span class="author">Author / <a >{{blogObj.author}}</a></span>
          <span class="publish-time">   At time / <a >{{blogObj.createTime}}</a></span>
          <Icon type="ios-star-outline" /> {{blogObj.collectCount}}
          <Icon type="ios-thumbs-up-outline" /> {{blogObj.likeCount}}
        </Header>
        <Layout>
          <Content>
            <div v-html="blogObj.blogContent">{{blogObj.blogContent}}</div>
          </Content>
        </Layout>
        <Footer>
          <!--评论列表-->
          <List >
            <ListItem v-for="(item, index) in commentArr" :key="index">
              <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.content"/>
              <template slot="action">
                <li>
                  <a href="#">
                    <Icon type="ios-thumbs-up-outline" /> {{item.likeCount}}
                  </a>
                </li>
                <li>
                  <a href="#">
                    <Icon type="ios-chatbubbles-outline" @click="showMore(item.id)"/> 1
                  </a>
                </li>
              </template>
            </ListItem>
          </List>
        </Footer>
      </Layout>

    </Modal>

  </div>
</template>

<script>
  import {dealPageData} from "@/utils/myPageUtil";
  import {Button} from "iview";
  import {recommendBlog,blogDetail} from '@/api/blogApi';
  import {recommendPage,topRecommend,removeRecommend} from '@/api/blogRecommend';
  export default {
    name: "blogRecommend",
    //用于刷新页面
    inject: ['reload'],
    data () {
      return {
        detailDig:false, //详情窗口
        blogObj:{  //博客对象
          id:0,
          blogContent:'',
          likeCount:0,
          author:'',
          createTime:'',
          collectCount:0,
        },
        commentArr:[], //评论数组
        pageData:{
          total:0,
          current:1,
          size:10,
          data:[]
        },
        columns1: [
          {
            title: '博客标题',
            key: 'title'
          },
          {
            title: '简介',
            key:"summary"
          },
          {
            title: '博客点击数',
            key: 'clickCount'
          },
          {
            title: '博客收藏数',
            key: 'collectCount'
          },
          {
            title: '是否原创',
            key: 'isOriginal',
            render: (h, params) => {
              if (params.row.delFlag == 1) {
                return h('span', '是');
              }else {
                return h('span', '否');
              }
            }
          },
          {
            title: '作者',
            key: 'author'
          },
          {
            title: '文章出处',
            key: 'articlesPart'
          },
          {
            title: '分类',
            key: 'sortName'
          },
          {
            title: '标签',
            key: 'tagName'
          },
          {
            title: '博客等级',
            key: 'level',
          },
          {
            title: '标题图',
            key: 'picUrl',
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.pictureUrl
                  },
                  style: {
                    width: '60px',
                    height: '60px'
                  }
                }),
              ]);
            }
          },
          {
            title: '博客推荐操作人',
            key: "userName"
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            fixed: 'right',
            align: 'center',
            render: (h, params) => {
              return h("div", [//渲染一个div标签
                h(
                  Button,//在div标签下渲染一个iview组件
                  {
                    props: {//传递参数
                      type: "primary",
                      size: "small"
                    },
                    style: {//设置样式
                      marginRight: "5px"
                    },
                    on: {//监听$emit事件
                      click: () => {
                        this.blogDetail(params.row.recommendId);
                      }
                    }
                  },
                  "详情"
                ),
                h(
                  Button,
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.topRecommend(params.row.id);
                      }
                    }
                  },
                  "置顶"
                ),
                h(
                  Button,
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.removeRecommend(params.row.id);
                      }
                    }
                  },
                  "删除"
                ),
              ]);
            }
          }
        ],
        data1: []
      }
    },
    methods:{
      changePage(index){
        recommendPage(index,this.pageData.size).then(res => {
          if(res.data.code == 200){
            //处理分页
            this.pageData = dealPageData(res.data);
            this.data1 = this.pageData.data;
          }
        })
      },
      topRecommend(id){
        //推荐置顶
        topRecommend(id).then(res => {
          if(res.data.code == 200){
            this.$Message.info("推荐置顶成功");
            //刷新页面
            this.reload();
          }
        });
      },
      blogDetail(id){
        //查询博客详情
        blogDetail(id).then(res => {
          if(res.data.code == 200){
            let obj =  res.data.data.blog;
            this.blogObj.blogContent = obj.content;
            this.blogObj.id = obj.id;
            this.blogObj.createTime = obj.createTime;
            this.blogObj.author = obj.author;
            this.blogObj.likeCount = obj.likeCount;
            this.blogObj.collectCount = obj.collectCount;

            res.data.data.commentList.forEach(item => {
              let obj = {};
              obj.id = item.id;
              obj.title = item.userName + "         " + item.commentTimeStr;
              obj.source = item.source;
              obj.likeCount = item.likeCount;
              obj.content = item.content;
              obj.avatar = item.avatar;
              this.commentArr.push(obj);
            })
          }
        });
        this.detailDig = true;
      },
      removeRecommend(id){
        //删除推荐
        removeRecommend(id).then(res => {
          if(res.data.code == 200){
            this.$Message.info("删除推荐成功");
            this.reload();
          }
        });
      },
      ok(){
        //刷新当前页面,保证数据表单数据清空
        this.reload();
      },
      cancel(){
        //刷新当前页面,保证数据表单数据清空
        this.reload();
      }
    },
    created(){
      //加载分页数据
      recommendPage(this.pageData.current,this.pageData.size).then(res => {
        if(res.data.code == 200){
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        }
      })
    }

  }
</script>

<style scoped>

</style>
